<template>
  <div class="index">
    <!-- 扫码跳转小程序 -->
    <van-button plain color="#DF9822" round @click="scanCode">扫一扫</van-button>
    <van-button plain color="#DF9822" round @click="chooseImage1">上传图片</van-button>
    <van-button plain color="#DF9822" round @click="getLocation1">获取当前位置</van-button>
    <!-- <van-button plain color="#DF9822" round @click="constnavigatorLocation">H5当前位置</van-button> -->
    {{ address }}
  </div>
</template>

<script>
import { reactive, toRefs, ref, onBeforeMount } from 'vue'
import { getSign } from '@/utils/jssdk'
import AMap from '@/utils/maps/maps'
// var amapFile = require('../utils/maps/amap-wx.130.js') //如：..­/..­/libs/amap-wx.js
// 创建地图
// var myAmapFun = new amapFile.AMapWX({
//   key: '2b37661e9a8f31bb90cfa0bd3fc4d12f'
// })
import * as ww from '@wecom/jssdk'
export default {
  name: 'jsApi',
  setup() {
    const state = reactive({
      longitude: '',
      latitude: '',
      address: ''
    })
    onBeforeMount(() => {
      // getLocationInfo()
      getSign()
    })
    const scanCode = () => {
      ww.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果
        scanType: ['qrCode', 'barCode'],
        success: function (res) {
          // 当needResult为1时返回处理结果
          const result = res.resultStr
        }
      })
    }
    const chooseImage1 = () => {
      ww.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        defaultCameraMode: 'batch',
        isSaveToAlbum: true,
        success: function (res) {
          alert('chooseImage success', JSON.stringify(res))
        },
        fail: function (err) {
          const msg = 'chooseImage fail1' + JSON.stringify(err)
          alert(msg)
        }
      })
    }
    const getLocation1 = () => {
      // 调用 register 后可以立刻调用其他 JS 接口
      ww.getLocation({
        type: 'wgs84',
        success(res) {
          alert(JSON.stringify(res))
        }
      })
    }
    const constnavigatorLocation = () => {
      if (navigator.geolocation) {
        // alert("该浏览器支持获取地理位置。")
        navigator.geolocation.getCurrentPosition(
          (position) => {
            let lng = position.coords.longitude
            let lat = position.coords.latitude
            alert(`HTML5（地理定位）lng:${lng},lat:${lat}`)
          },
          (error) => {
            let msg
            switch (error.code) {
              case 1:
                msg = '用户拒绝对获取地理位置的请求。'
                break
              case 2:
                msg = '位置信息是不可用的。'
                break
              case 3:
                msg = '请求用户地理位置超时。'
                break
              case 4:
                msg = '未知错误。'
                break
            }
            alert('获取地理位置失败。' + msg)
          }
        )
      } else {
        alert('该浏览器不支持获取地理位置。')
      }
    }
    const getLocationInfo = () => {
      console.log(1)
      AMap().then(() => {
        console.log(2)
        const geolocation = new window.AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 60000, // 超过10秒后停止定位，默认：5s
          position: 'RB', // 定位按钮的停靠位置
          buttonOffset: new window.AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
        })
        geolocation.getCurrentPosition(function (status, result) {
          console.log(3)
          // console.log("getLocation res: ", status,result);
          state.longitude = result.position.lng
          state.latitude = result.position.lat
          // result.formattedAddress  完整地址
          // getAddress();
          // alert('高德定位' + status + JSON.stringify(result))
        })
      })
    }
    const getAddress = () => {
      AMap().then(() => {
        const geocoder = new window.AMap.Geocoder({
          city: ''
        })

        geocoder.getAddress([state.longitude, state.latitude], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            state.address = result.regeocode.formattedAddress
          }
        })
      })
    }
    return {
      ...toRefs(state),
      scanCode,
      chooseImage1,
      getLocation1,
      constnavigatorLocation
    }
  }
}
</script>

<style lang="less" scoped></style>
